<template>
  <div class="wrap">
    <div class="banner">
      <div class="banner-main">
        <span class="banner-main__title">智慧社区</span>
        <span class="banner-main__subtitle">全国有30多万个社区，城市居民大多数都是居住在社区内，社区运营业务的数字化、智能化是提升居民生活幸福感的核心能力</span>
        <span class="banner-main__btn" @click="showDialog">服务咨询</span>
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h1 class="model-title">行业趋势</h1>
        <h6 class="model-desc">model description</h6>
        <div class="card">
          <span class="description">
            针对不同的环境需求浪潮提供不同的云迁移工具，实现在不中断业务服务的情况下的业务系统迁移。<br />               
            铝工业互联云迁移可以实现物理机-虚拟机，虚拟机-虚拟机，物理机-云主机，虚拟机-云主机等的迁移能力，实现业主生产环境的整体迁移。<br />  
            源服务器系统与目标系统操作系统相同一致的业务迁移，可以直接通过浪潮云迁移工具软件实现业务迁移，对应目标系统与源系统的操作系统不一致的情况，可以通过迁移一体机系统实现，系统环境切换，完成系统迁移。<br />
          </span>
          <div align="center"><img src="@/assets/flow1.png" width="670px" /></div>
        </div>
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h1 class="model-title">应用场景</h1>
        <h6 class="model-desc">Application scenarios</h6>
        <div class="card">
          <el-tabs v-model="activeName" @tab-click="handleClick" :stretch=true >
            <el-tab-pane label="             车行管理             " name="first">
              <div style="display:flex">
                <div style="width:50%;font-size:13px;line-height:24px">
                    <span sytle="font-size:15px;">车行管理</span><br/><br/>
                    系统线上化，减少人工干预，规避“跑，冒，漏”的情况，减少车场收费外流，车场出入口不再设置职位，更换智能运营中心云坐席统一管理，<br/>
                    一个云坐席职位可以管理多个项目，节省人工成本。对于车位空置状况进行监管，提高车场周转率，降低车场空置率<br/>
                    <br/>
                    - 传统模式通过现金缴费、人工收费模式容易造成通行口拥堵与效率低等问题，车场巡逻采用巡逻岗处理应急事件，问题处理流程不仅慢，而且没有信息化管理<br/>
                    - 通过模式升级，车场采用移动支付与线上数据统计的方式，实现了无感支付，提升车行效率，杜绝收费漏洞<br/>
                    - 车场安全由智能运营中心云坐席统一管理，同时撤掉车场门口岗，实现车场无人化值守，项目中心也同样可以远程开闸放行，对于远程无法处理的异常，将会直接调度项目现场的机动巡逻岗进行处理，实现真正的减岗增效<br/>
                
                </div>
                <div align="center"><img src="@/assets/sc1.jpg" width="700px" /></div><br />
              </div>
            </el-tab-pane>
            <el-tab-pane label="             人行管理             " name="second">
              <div style="display:flex">
                <div style="width:50%;font-size:13px;line-height:24px">
                    <span sytle="font-size:15px;">人行管理</span><br/><br/>
                    所有者自助出入，减少门岗低价值工作和侧门门岗人员配置，有助于分类授权，从而提高服务质量<br/>
                    <br/>
                    - 通过穿戴式AR设备，协助门岗对入园人员进行分类判定和处理，智能运营中心及时联动处理特殊安全事件<br/>
                    - 智能运营中心远程实时监管门状态以及出入人员身份，面对安全事件时及时远程调度，有效防范危险人员进入<br/>
                    - 统一管理各类的拜访人员，物流外卖人员和装修务工人员等在园区进出和活动范围；掌控，预防和避免不必要的风险<br/>
                
                </div>
                <div align="center"><img src="@/assets/sc2.jpg" width="700px" /></div><br />
              </div>
            </el-tab-pane>
            <el-tab-pane label="             设备管理             " name="third">
            <div style="display:flex">
                <div style="width:50%;font-size:13px;line-height:24px">
                    <span sytle="font-size:15px;">设备管理</span><br/><br/>
                    7 * 24小时设备运行监管，故障自动报警；人工快速处理决定，降低故障维护成本，所有运行数据信息化并实时记录，针对后续运行策略和节能降耗提供在线数据支持，帮助现场设备及节能管理。<br/>
                    <br/>
                    - 将设备“上云”，7*24小时设备运行监管，故障自动报警<br/>
                    - 人工快速处理判定，降低故障维护成本；并由智慧运营中心坐席专家，提供远程作业支持，不仅节省项目现场的作业人员，也集中专家资源服务更多项目<br/>
                    - 数据信息化并实时记录，对于后续运行策略和节能降耗提供在线数据支持，帮助现场设备及节能管理<br/>
                
                </div>
              <div align="center"><img src="@/assets/sc3.jpg" width="700px" /></div><br />
            </div>
            </el-tab-pane>
            <el-tab-pane label="             视频管理             " name="fourth">
              <div style="display:flex">  
                <div style="width:50%;font-size:13px;line-height:24px">
                    <span sytle="font-size:15px;">视频管理</span><br/><br/>
                    AI看代替人看，可有效判读陌生人等安防事件，并把信息发送给智慧运营中心安防指挥调度岗，实现7 * 24小时的安全事件的预先预判<br/>
                    <br/>
                    - 安防调度岗通过日常巡视工作完全替代现场巡视工作，有计划的巡视主通道、后楼道、主出入口等，如发现问题可与现场机动岗进行联动，并响应现场安防事件<br/>
                    - 视频巡更服务对园区关键区域的摄像头进行选择分组，特定时间段按线路定时调度摄像头查看；在公寓楼道内部部署摄像头定时逐次视频分析，自动预警事件异常，代替保安人员所需的楼道内巡逻<br/>
                    - 住宅园区的安全是第一需求，园区物业管理需要提供良好的周界入侵防护能力，能对入侵事件进行有效感知和处理；同时在园区内部的重点区域同样存在入侵防护的要求<br/>
                
                </div>
                <div align="center"><img src="@/assets/sc4.jpg" width="700px" /></div><br />
              </div>
            </el-tab-pane>
            <el-tab-pane label="             对讲管理             " name="fifth">
              <div style="display:flex">
                <div style="width:50%;font-size:13px;line-height:24px">
                      <span sytle="font-size:15px;">对讲管理</span><br/><br/>
                      采用云对讲，实现软件与硬件分离，真正实现多屏互动，实现业主与物业间高粘性的信息互动。<br/>
                      <br/>
                      - 通过智能运营中心的云对讲服务，提供多项目现场的对讲支持服务，如车行对讲、人行对讲和作业专家的对讲应用<br/>
                      - 业主对讲形成有效记录，方便后续问题追溯和分析，并提供给业主线上沟通渠道，提升业主的体验感知<br/>
                      - 对讲产品可兼容多品牌主机，维修不再受制于供应商；云对讲还采用水平综合布线方式，安装拆卸方便，减少设备故障率。<br/>
                  
                </div>
                <div align="center"><img src="@/assets/sc5.jpg" width="700px" /></div><br />
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h1 class="model-title">方案技术架构</h1>
        <h6 class="model-desc">Scheme Technology Architecture</h6>
        <div class="card">
          <div align="center"><img src="@/assets/smartCommunity1.svg" width="862px" /></div><br />
          <span class="description">
            <span style="font-size:24px;line-height:20px;">智慧社区架构</span><br/>
            华为云智慧社区技术架构，通过社区中台，云服务和边云协同技术支撑，聚焦安全，高效，体验和成本优势，帮助客户建设智能化，标准化的智慧社区综合业务系统<br/>
            
            <span style="font-size:22px;line-height:35px;">方案优势</span><br/>
            <span style="font-size:20px;line-height:25px;">智能化</span><br/>
            1.全面感知：人、车、物、环境全联接<br/>
            2.跨域数据融合，实现业务智能联动<br/>
            3.高效智能：更安全、更舒适、更高效、更低的运营成本,实现可视可管可控<br/>
            <span style="font-size:20px;line-height:25px;">云化+服务化</span><br/>
            1.公共能力平台化服务化<br/>
            2.节省成本：边云协同架构实现视频安防云化和端侧应用统一管理，实现云端运维，减少边缘的运维成本占用<br/>
            3.资源弹性，按需取用，全国小区就近接收<br/>
            <span style="font-size:20px;line-height:25px;">标准、开放性</span><br/>
            1.平台+生态，应用敏捷开发<br/>
            2.兼容主流开源生态<br/>
            3.园区多样异构系统接入<br/>
          </span>
        </div>
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h1 class="model-title">方案优势</h1>
        <h6 class="model-desc">Scheme advantage</h6>
        <div class="row" v-for="(item, index) in list" :key="index">
          <div class="row-box" v-for="(sub, i) in item" :key="i">
            <div class="row-icon">
              <img :src="sub.icon" />
            </div>
            <h2 style="line-height: 28px">{{sub.title}}</h2>
          </div>
        </div>
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h1 class="model-title">客户案例</h1>
        <h6 class="model-desc">model description</h6>
        <div class="card">
          <div class="card-box">
            <b style="font-weight:bold">中海华庭智慧社区</b><br />
            位于深圳福田区的中海华庭，是住宅及商业办公配套于一体的多业态小区，具有20多年的历史。<br/>
            华为和兴海物联用“吾将智慧社区联合解决方案”对它进行了智慧社区改造，小区实现了“看车行”“看人行”“看设备”“看视频”“看对讲”等社区应用的统一接入和云端转换<br/>
            整个社区的设备，人员，事件都能够实现多方联动，统一管理，真正实现社区的智慧化，数字化。<br/>
          </div>
          <!-- <div class="card-box">
            <b style="font-weight:bold">2、 中冶集团</b><br />
            帮助中冶集团将门户网站、部分二级单位的OA、邮件等业务系统迁移至中冶云平台。
          </div>
          <div class="card-box">
            <b style="font-weight:bold">3、 华讯方舟</b><br />
            助力华讯方舟的数据中心,以及合作的电信运营商,完成大量的业务系统迁移。
          </div>   -->
        </div>
      </div>
    </div>
    <el-dialog title="感谢联系铝工业互联平台" :visible.sync="dialogFormVisible" width="500px">
      <el-form :model="form">
        <el-form-item label="咨询类型" :label-width="formLabelWidth">
          <el-select v-model="form.prop1" style="width:380px">
            <el-option label="方案咨询" value="value1"></el-option>
            <el-option label="优惠活动" value="value2"></el-option>
            <el-option label="售后服务" value="value3"></el-option>
            <el-option label="商务合作" value="value4"></el-option>
            <el-option label="其他" value="value5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="咨询内容" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :rows="5"
            placeholder="请输入内容"
            v-model="form.prop2"
            ></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.prop3">
          </el-input>
        </el-form-item>
        <el-form-item label="手机号码" :label-width="formLabelWidth">
          <el-input v-model="form.prop4">
          </el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="form.prop5">
          </el-input>
        </el-form-item>
        <el-form-item label="所在行业" :label-width="formLabelWidth">
          <el-select v-model="form.prop6" style="width:380px">
            <el-option label="政府" value="value1"></el-option>
            <el-option label="教育" value="value2"></el-option>
            <el-option label="医疗" value="value3"></el-option>
            <el-option label="传媒" value="value4"></el-option>
            <el-option label="金融" value="value5"></el-option>
            <el-option label="互联网" value="value6"></el-option>
            <el-option label="IT" value="value7"></el-option>
            <el-option label="制造" value="value8"></el-option>
            <el-option label="能源" value="value9"></el-option>
            <el-option label="化工" value="value10"></el-option>
            <el-option label="汽车" value="value11"></el-option>
            <el-option label="物流" value="value12"></el-option>
            <el-option label="农业" value="value13"></el-option>
            <el-option label="建筑" value="value14"></el-option>
            <el-option label="服务" value="value15"></el-option>
            <el-option label="贸易" value="value16"></el-option>
            <el-option label="其他" value="value17"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Streamer from '@/components/Streamer/Streamer'
export default {
  components: {
    Streamer
  },
  data () {
    return {
      list: [
        [
          { icon: require('@/assets/icon_01.png'), title: '响应时间由7.5分钟降到2分钟；处置效率提升50%；事件事后处置变事前预防、事中处置；实现一个中心，管理全局事件；' },
        ],
        [
          { icon: require('@/assets/icon_03.png'), title: '提升运营、服务作业效率改进10%；服务评价可数据/量化、可视化；设备可用性提高10%；设备故障及时发现率提升50%；' },

        ],
        [
          { icon: require('@/assets/icon_05.png'), title: '一个平台提供运营服务、业主服务；可扩展，可复制；刷脸、车牌检测方便快捷；访客办理由5分钟缩短到1分钟；陪同由6分钟至0分钟；' },
        ],
        [
          { icon: require('@/assets/icon_07.png'), title: '保安数量减少30%~40%；综合能耗下降10%；设备寿命延长10%，园区综合运营成本得到大幅下降；' },
      
        ],

      ],
      dialogFormVisible: false,
      formLabelWidth: '80px',
      activeName:'first',
      form: {
        prop1: '',
        prop2: '',
        prop3: '',
        prop4: '',
        prop5: '',
        prop6: '',
      }
    }
  },
  methods: {
    showDialog () {
      this.dialogFormVisible = true
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/style/variables.less';

.wrap {
  background-color: rgb(246, 246, 246);
}

.banner {
  width: 100%;
  height: 400px;
  background: url('~@/assets/bg1.jpg') no-repeat center 100%;
  .banner-main {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 80px 0;
    .banner-main__title {
      font-size: 42px;
      color: #ffffff;
    }
    .banner-main__subtitle {
      font-size: 14px;
      color: #ffffff;
      margin: 20px 0;
    }
    .banner-main__btn {
      cursor: pointer;
      color: #ffffff;
      transition: all .4s;
      display: block;
      width: 138px;
      height: 39px;
      line-height: 39px;
      background: rgba(0,220,243,0.5);
      border: 1px solid #00dcf3;
      color: #ffffff;
      font-size: 14px;
      text-align: center;
      &:hover {
        background: rgba(0,220,243,0.8);
      }
    }
  }
}

.model {
  padding: 60px 0;
  .model-main {
    width: 1200px;
    margin: 0 auto;
    .card {
      .card-box {
        margin-bottom: 15px;
        line-height: 28px;
      }
    }
    .row {
      margin-right: -8px;
      margin-right: -8px;
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
      .row-box {
        display: flex;
        flex: 1;
        align-items: center;
        background-color: #2a3f74;
        color: #698acd;
        border: 1px #405b9f solid;
        padding: 20px;
        margin-right: 20px;
        &:last-child {
          margin-right: 0;
        }
        .row-icon {
          width: 46px;
          height: 46px;
          margin-right: 20px;
        }
      }
      .row-card {
        background: #2a3f74;
        color: #698acd;
        padding: 15px;
        padding-left: 95px;
        line-height: 28px;
        margin-bottom: 15px;
        border: 1px #405b9f solid;
      }
    }
  }
  .model-title {
    color: #403d56;
    font-size: 30px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    margin-bottom: 5px;
    text-align: center;
  }
  .model-desc {
    color: #bababa;
    font-size: 14px;
    font-weight: normal;
    margin: 0 0 50px 0;
    padding: 0;
    text-align: center;
    .card{
      .description{
      line-height: 28px;
      }
    }
  }
  &:nth-child(odd) {
    background: rgb(32, 50, 96);
    .model-title {
      color: rgb(97, 145, 221);
    }
    .model-desc {
      color: rgb(70, 106, 170);
    }
  }
}

.card {
  @box_shadow();
  width: 100%;
  padding: 30px;
  background: #fff;

}
.description{
  line-height: 28px;
}

</style>
